/**
 * 本文件用于：适用于表单内部的上传组建
 * 使用时，像普通Upload一样，以children的形式嵌入到 Form.Item中即可
 *
 * 使用数据时，可参考如下写法
 *
 *     const formData = new FormData();
 *     通过Form获取到的值.forEach((file: any) => {
 *        formData.append('files', file);
 *    });
 *
 */
import type { UploadProps } from 'antd';
import { Button, Upload } from 'antd';
import type { UploadFile } from 'antd/es/upload/interface';
import React, { memo } from 'react';

interface IProps {
  /** 界面展示的组件（点击后会触发选择文件弹窗） */
  children?: React.ReactNode;
  /** 未设置children时，默认为一个按钮，此字段用于设置按钮名称 */
  btnText?: string;
  /** 默认已上传文件（Form.Item中，会自动提供这个值） */
  values?: UploadFile[];
  /** 文件改变时，接收改变后文件列表的方法（Form.Item中，会自动提供这个方法） */
  onChange?: Function;
  /** 可传入antd的Upload组件支持的所有属性 */
  uploadProps?: UploadProps;
  /** 上传组件前面展示的组件（不触发文件选择弹窗） */
  beforeContent?: React.ReactNode;
  /** 上传组件后面展示的组件（不触发文件选择弹窗） */
  afterContent?: React.ReactNode;
}

export default memo((props: IProps) => {
  const {
    children,
    btnText,
    values,
    onChange: formItemOnChange,
    uploadProps,
    beforeContent,
    afterContent,
  } = props;

  const onRemove = (file: any) => {
    if (!values) return;

    const index = values.indexOf(file);
    const newFileList = values.slice();
    newFileList.splice(index, 1);
    formItemOnChange && formItemOnChange(newFileList);
  };

  const beforeUpload = (file: any) => {
    formItemOnChange && formItemOnChange([...(values || []), file]);

    // return false后，就不会触发自动上传
    return false;
  };

  return (
    <>
      {!!beforeContent && beforeContent}
      <Upload fileList={values} beforeUpload={beforeUpload} onRemove={onRemove} {...uploadProps}>
        {children ? children : <Button type="primary">{btnText || '上传'}</Button>}
      </Upload>
      {!!afterContent && afterContent}
    </>
  );
});
